﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>车辆违法查询</title>
    <link type="text/css" href="/szgawx/static/plugins/css/common.css" rel="stylesheet"/>
    <script src="/szgawx/static/plugins/js/FormValid.js"></script>
    <style type="text/css">
body {font-size: 62.5%;font-family: "微软雅黑", serif;}
a{text-decoration: none;}
.btn {
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 1.1em;
    width: 100%;
    display: block;
}
.btn.simple {
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #157dfb;
    color: #ffffff;
    font-family: "微软雅黑", serif;
    border-radius: 5px;
    border: 0;
    width: 100%;
    font-size: 1.1em;
    float: left;
}
.btn.simple:hover {
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #0363d7;
    color: #ffffff;
    font-family: "微软雅黑", serif;
    border-radius: 5px;
    border: 0;
    width: 100%;
    font-size: 1.1em;
}
.main {
        font-size: 1.6em;
        margin: 15px;
        }
.main .form {
        height: 50px;
        line-height: 50px;
        border: 1px solid #dddddd;
        width: 100%;float: left;margin-bottom: 12px;
        border-radius: 3px;
        background: #fff;
        }

.main .form .label {
        height: 50px;
        line-height: 50px;
        color: #157dfb;
        text-indent: 0.8em;
        float: left;
        width: 80px;
        }
.main .form .element {
        height: 50px;
        line-height: 50px;
        margin-left: 85px;
        display: block;
        }
.main .form .element input {
        color: #666;
        font-family: "微软雅黑", serif;
        height: 24px;line-height: 24px;float: left;margin-top: 13px;
        border: 0;
        width: 98%;
        font-size: 1.0em;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        }
.main .btn:active {background-color: #0772f4;cursor: hand;}
/*新增查询结果样式*/
.cxjg{width: 100%;float: left;margin-top: 10px;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;background: #fff;padding:5px 12px;box-sizing: border-box;}
.cxjg tr td{height: 24px;line-height: 24px; font-size: 14px;word-break:break-all; word-wrap:break-word;}
.cxjg tr .td_span{width: 54px;height: 100%;float: left; text-indent: 10px;color: #666;float: left;}
.cxjg tr .td_color{color: #ff8333;font-size: 15px;}
.cxjg tr .td_color_rt{float: right;}
.cxjg tr td.td1{border-right: 1px solid #ddd;}
.cxjg tr td img{width: 65px;padding-left: 4px;}
.pic_txz { width:100%; margin:0 auto; position:fixed; top:0%; left:0%; display:none;}
.pic_txz img { width:100%; height:100%;}
.td1 img{height:450%;}
</style>
</head>
<body style="margin: 0px;background: #f5f5f5;">
<div class="main">
<form id="a">
    <div class="form">
        <span class="label">车牌号：</span>
        <span class="element"><input id="txt_idcard" name="hphm" value="" class="no-border" type="text" valid='isEnglishOrNum' errmsg='请输入车牌号' placeholder="请输入车牌号"/></span>
    </div>  
     <div class="form">
        <span class="label">车架号：</span>
        <span class="element"><input id="txt_sbk" name="vin" value="" class="no-border" type="text" valid='isEnglishOrNum' errmsg='请输入车架号后七位' placeholder="请输入车架号后七位"/></span>
    </div>
    <div style="width: 100%;float: left; margin: 8px 0px;"><a href="javascript:;" id="btn_query" class="btn simple no-border">查 询</a></div>
</form>
    <div id="result" class='row' style="display: none;">      
    </div>  
</div>
<div id="result" style="width: 100%;float: left;margin-bottom: 20px;" >

</div>
<script type="text/javascript" src="/szgawx/static/plugins/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/szgawx/static/plugins/js/common.js"></script>
<script type="text/javascript">
var _preFix = getServerPreFix();
var iswxjs=0;
var theRequest = GetRequest();
document.addEventListener("deviceready", function(){
			navigator.splashscreen.hide();  
		}, false);
function goBack(){
		navigator.intent.goback(0);
}
    $(function () {
        $("#btn_query").click(function (event) {
        	 var txt_sbk = $("#txt_sbk").val().trim();
        	 //_preFix = "http://localhost:8080";
             var idcard = $("#txt_idcard").val().trim();
             if (txt_sbk == null || txt_sbk == "") {
                 toast("请输入车架号");
                 return;
             }
             if (idcard == null || idcard == "") {
                 toast("请输入车牌号");
                 return;
             }
            $.ajax({
                url: _preFix+"/szgawx/api/query/surveil/"+idcard+"/"+txt_sbk+"?source="+theRequest['source']+"&openId="+theRequest['openId'],
                type: "post",               
                dataType:"json",               
               // data: {"idcard": idcard, "sbk": txt_sbk},
                timeout: 6000,
                beforeSend: function () {
                    loading();
                },
                success: function (data) {
                	//alert(data.msg)
                	var src=[];
                	$("#result").html('');
                    if (data && data.result) {
                    	//{"XH":"3213237901617354","HPZL":null,"HPHM":null,"CLSBDH":null,"CJJGMC":"泗阳大队","WFSJ":"2016-04-22T10:45:00","WFDZ":"青泗线（245省道）131公里900米","WFXW":"驾驶中型以上载客载货汽车、危险物品运输车辆以外的其他机动车行驶超过规定时速10%未达20%的","CLBJ":null,"JKBJ":null,"WFJFS":0,"FKJE":"50","ZT":"未处理未交款","WFJFS1":"3"}
                    	$.each(data.vioSurveil,function(i,v){
	                    	var html = "";                 	
	        				var image = "";
	        				if(null!=v.photo){
	        					image = "data:image/png;base64,"+v.photo;
	        				}else{
	        					image = "/szgawx/static/plugins/images/person.jpg";
	        				}
	        				//alert(image);
	        				src[src.length] = image;
	
	        				html += '<table width="100%" border="0" cellspacing="0" cellpadding="0" class="cxjg">';
	        				html += "<tr><td width=\"85px\" height=\"80%\" rowspan=\"5\" class=\"td1\"><img id=\"img_"+(i)+"\"  src=\""+image+"\" onclick='showPic(\"" + i+ "\")'/></td>";
	        				html += '<td><span class="td_span">编号：</span> '+v.XH+' </td></tr>';
	        				html += '<tr> <td><span class="td_span">时间：</span>'+v.WFSJ+'</td> </tr>';
	        				html += '<tr> <td><span class="td_span">地点：</span>'+v.WFDZ+'</td> </tr>';
	        				html += '<tr> <td><span class="td_span">行为：</span>'+v.WFXW+'</td> </tr>';
	        				html += '<tr> <td><span class="td_span td_color">罚款</span><span class="td_color">'+v.FKJE+'元</span>';
	        				html += '<span class="td_color td_color_rt">'+v.ZT+'</span></td></tr></table>';
	        				html += "<div class='pic_txz' id='txz_pic"+i+"' onclick='hidePic("+i+")'><img src='"+image+"' /></div>";
	        				$("#result").append(html);
	        				/*  $('#img_'+i).click(function(){
	 		                      //imagePreview(src[i],src);
	 		         		 }); */
                    	});
                        $("#result").show();
                        //$("#tip").hide();
                        finish();
                    } else {
                        finish(data.msg);
                    }
                },
                error: function (e) {
                 for(var k in e)
                 {
                 	//alert(k+"    "+e[k])
                 }
                 	//alert(e.msg)
                    finish("查询失败");
                   // window.location.href = _preFix + "/szgawx/oauth/oauth?state="+_preFix+"/szgawx/api/query/11";
                }
            });
            event.stopPropagation();
            return false;
        });
        
        document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {  
		 	//alert("微信js完成")
		 	iswxjs = 1;
		});
    });
    function showPic(i){
    	$("#txz_pic"+i).show();
    }
    function hidePic(i){
    $("#txz_pic"+i).hide();
    }
    function validate()
	{	  
        if(validator(E("a"))){
        	return true;
        }
        else
       	{
       		return false;
       	}
	}
</script>
<script>  
//这个是调用微信图片浏览器的函数 
function  imagePreview(curSrc,srcList) 
{
      //这个检测是否参数为空
      if(!curSrc || !srcList || srcList.length == 0) {
          return;
      }
      if(iswxjs==1)
     	{
      	 //alert(WeixinJSBridge)
          //这个使用了微信浏览器提供的JsAPI 调用微信图片浏览器
          WeixinJSBridge.invoke('imagePreview', { 
              'current' : curSrc,
              'urls' : srcList
          });
     	}
      else
      {
      	 //ShowMsg("图片预览器加载中...",2);
      	  imgpre.src = curSrc ;
      	  imgprediv.style.width = document.body.clientWidth;
      	  imgprediv.style.height = document.body.clientHeight;
    	  imgprediv.style.display="";
      }
               
}
</script>
<div id="imgprediv" onclick="this.style.display='none'" style="display:none;position: absolute;top:1px;left:px;z-index: 9999">
<img id="imgpre" alt="" src="">
</div>
</body>
</html>

